<template>
  <div class="catelist flex">
    <div class="catelistleft banxin flex">
      <div class="next po"></div>
      <div class="prev po"></div>
      <div class="catelistcenter" v-for="item in arr" :key="item.id">
        <div
          class=""
          :style="{
            'background-image': 'url(' + item.picWebUrl + ')',
            'background-repeat': 'no-repeat',
            'background-size': 'cover',
          }"
        ></div>
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="catelistright flex">
      <div class="catelistcenter">
        <div class="faq"></div>
        <p>常见问题</p>
      </div>
      <div class="catelistcenter">
        <div class="anchor"></div>
        <p>常见问题</p>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: ["arr"],
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
.catelist {
  position: relative;
  .next {
    background: url("https://s2.music.126.net/style/web2/img/index_radio/radio_slide.png?ba5250665f943d51c607849d33ea9f62")
      no-repeat;
    background-position: -30px -30px;
    right: 16px;
  }
  .prev {
    background: url("https://s2.music.126.net/style/web2/img/index_radio/radio_slide.png?ba5250665f943d51c607849d33ea9f62")
      no-repeat;
    background-position: 0 -30px;
  }
  .po {
    opacity: 0.25;
    top: 50%;
    width: 20px;
    height: 30px;
    position: absolute;
    cursor: pointer;
  }
  overflow: hidden;
}
.catelistleft {
  margin: 20px 20px 0 20px;
  flex-wrap: wrap;
}
.catelistcenter {
  margin: 0 18px;
  cursor: pointer;
  padding: 10px 10px;

  &:hover {
    background-color: #ccc;
  }

  div {
    width: 48px;
    height: 48px;
    background-position: 0 0;
  }
  p {
    text-align: center;
    color: #888;
  }
}
.catelistright {
  margin-top: 18px;
  align-items: baseline;
  .faq {
    background: url("https://music.163.com/style/web2/img/index_radio/radio_faq.png")
      no-repeat;
  }
  .anchor {
    background: url("https://music.163.com/style/web2/img/index_radio/radio_apply.png") no-repeat;
  }
}
</style>